<script>
import {Dialog, Toast} from "vant";

export default {
  name: "EChatAddPopover",
  data() {
    return {
      showPopover: false,
      actions: [
        {text: 'Add Friend', icon: 'user-o'},
        // {text: 'Create Group', icon: 'friends-o'}
      ],
      isShowClose: false,
      groupDialog: false,
      newGroupName: ""
    };
  },
  methods: {
    onSelect(action) {
      if (action.text === 'Add Friend') {
        this.$router.push("/add-friend");
      } else if (action.text === 'Create Group') {
        this.$data.isShowClose = false
        this.$data.groupDialog = true
      }
    },
    createGroup() {
      let data = {
        name: this.$data.newGroupName
      }
      this.$http({
        url: `/group/create?groupName=${this.$data.newGroupName}`,
        method: 'post',
        data: data
      }).then((group) => {
        this.$store.commit("addGroup", group);
      })
    }
  },
}
</script>

<template>
  <div>
    <van-popover
        v-model="showPopover"
        placement="bottom-end"
        theme="light"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        class="custom-popover"
    >
      <template #reference>
        <div class="add-btn" @click="isShowClose = true" v-if="!isShowClose"><i class="el-icon el-icon-plus"></i></div>
        <div class="close-btn header-light-btn flex-center" @click="isShowClose = false" v-else><i
            class="el-icon el-icon-close"></i></div>
      </template>
    </van-popover>
    <van-dialog v-model="groupDialog" title="Create Group" show-cancel-button confirm-button-text="Create"
                cancel-button-text="Cancel" confirm-button-color="var(--chat-theme-color)" close-on-click-overlay
                @confirm="createGroup">
      <div class="group-name-container">
        <van-field v-model="newGroupName" label="" placeholder="Input the group chat name"/>
      </div>
    </van-dialog>
  </div>
</template>

<style lang="scss">
.group-name-container {
  margin: 20px 10px 15px 10px;

  .van-cell.van-field {
    border: 1px solid var(--chat-theme-color);
    border-radius: 5px;
  }
}

.add-btn, .close-btn {
  width: 22px;
  height: 22px;

  .el-icon {
    color: var(--chat-header-icon-color) !important;
    font-size: 22px;
  }
}

.add-btn {
  margin-left: 20px;
}

.close-btn {
  margin-left: 20px;
}

.van-popover .van-popover__content {
  padding: 10px;
  width: 320px;

  .van-popover__action {
    width: 300px !important;
    height: 56px !important;
    font-size: 18px;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover, &:active {
      border-radius: 6px;
      background: var(--add-icon-popover-hover-bg);
    }

    .van-popover__action-icon {
      font-size: 24px;
    }

    .van-popover__action-text {
      margin-left: 12px;
    }
  }
}
</style>